<template>
  <div class="order" v-loading="loading1">
    <div class="header-wrapper">
      <div class="one">
        <span class="order-num">订单号：{{orderNum}}</span>
        <span class="user-num">{{userNum}}人</span>
      </div>
      <div class="two">
        <span class="order-time">下单：{{orderTime}}</span>
        <!--<span class="table-name">{{tableName}}</span>-->
      </div>
    </div>
    <div class="content-wrapper">
      <div class="title">
        <span>所选菜品：</span>
        <span class="total-count">共{{foods_num}}道菜</span>
      </div>
      <div class="content">
        <div class="goods">
          <ul>
            <li class="food" v-for="(item,index) in goods" :key="index" v-if="item.is_retire===0">
              <span class="name">
                <span v-if="item.is_add===1" style="color:#f76763;">【加】</span>
                {{item.foodname}}<span v-for="(item1,key1,index1) in item.choosespecs" :key="index1"
                                       v-if="key1!=='price'" style="color:#f76763;font-size:14px;">({{key1}})</span>
              </span>
              <span class="count">x{{item.count}}</span>
              <span class="price" v-for="(item2,key2,index2) in item.choosespecs" :key="index2" style="color:#f76763;">¥{{item2/100}}</span>
            </li>
            <li class="food" v-for="(item,index) in goods" :key="index" v-if="item.is_retire!==0">
              <span class="name">
                <span style="color:#f76763;">【退】</span>
                <span v-if="item.is_add===1" style="color:#f76763;">【加】</span>
                {{item.foodname}}<span v-for="(item1,key1,index1) in item.choosespecs" :key="index1"
                                       v-if="key1!=='price'" style="color:#f76763;font-size:14px;">({{key1}})</span>
              </span>
              <span class="count">x{{item.count}}</span>
              <span class="price" v-for="(item2,key2,index2) in item.choosespecs" :key="index2" style="color:#f76763;">¥{{item2/100}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="desc">
        <div style="display: flex;">
          <span style="display:inline-block;width:35px;">备注: </span><span class="desc-content" style="flex: 1;max-height:30px;overflow: auto;">{{desc}}</span>
        </div>
      </div>
    </div>
    <div class="tail"></div>
    <div class="foot-wrapper">
      <span class="price-wrapper">总计：<span class="price">¥{{title_money/100}}</span></span>
      <span class="add-order" @click="goAddFoods">加 菜</span>
      <span class="pay-btn" @click="goPayPage">支 付</span>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {basePath} from '../api/api_const';

  export default {
    name: 'order',
    data() {
      return {
        orderNum: '',
        userNum: '',
        orderTime: '',
        tableName: '',
        desc: '',
        goods: [],
        foods_num: 0,
        title_money: 0,
        loading1: false
      }
    },
    methods: {
      init() {
        this.loading1 = true;
        axios({
          method: 'post',
          url: basePath + 'xzg_order/query_order',
          params: {
            table_num: localStorage.getItem('tableid')
          }
        })
          .then((data) => {
            let res = JSON.parse(data.request.response).response.data;
            console.log(res);
            this.orderNum = res.orderId;
            this.userNum = res.customer_num;
            this.orderTime = res.add_time;
            this.tableName = res.table_name;
            this.desc = res.remarks;
            this.foods_num = res.foods_num;
            this.title_money = res.title_money;
            this.goods = JSON.parse(res.order_foods);
            this.loading1 = false;
          })
          .catch(function (err) {
            console.log(err);
          });
      },
      // 加菜
      goAddFoods() {
        this.$router.push('/goods');
      },
      // 去支付页
      goPayPage() {
        // 查询该桌的订单状态
        axios({
          method: 'post',
          url: basePath + 'xzg_order/query_order',
          data: {
            table_num: localStorage.getItem('tableid')
          }
        })
          .then((data) => {
            let res = JSON.parse(data.request.response).response.data;
            if (res.order_static === '未支付') {
              console.log('修改成待支付成功');
              // 去改成待支付
              axios({
                method: 'post',
                url: basePath + 'xzg_order/change_pay_order_static',
                data: {
                  orderId: this.orderNum
                }
              })
                .then((data) => {
                  let res = JSON.parse(data.request.response).response.return_code;
                  // 修改成待支付成功
                  if (res === 'success') {
                    // localStorage.setItem('totalPrice', this.title_money);
                    // localStorage.setItem('out_trade_no', this.orderNum);
                    this.$router.push('/paypage');
                  }
                })
                .catch(function (err) {
                  console.log(err);
                });
            } else {
              console.log('已是待支付直接跳到支付页');
              // localStorage.setItem('totalPrice', this.title_money);
              // localStorage.setItem('out_trade_no', this.orderNum);
              this.$router.push('/paypage');
            }
          })
          .catch(function (err) {
            console.log(err);
          });
        // localStorage.setItem('totalPrice', this.title_money);
        // localStorage.setItem('out_trade_no', this.orderNum);
        // this.$router.push('/paypage');
        // 路由传值
        // this.$router.push({name: 'PayPage', params: {totalPrice: this.title_money}});
        // 接受路由传值的值
        // this.$route.params.totalPrice
      }
    },
    created() {
      this.init();// 初始化
    }
  }
</script>

<style scoped lang="scss">
  .order {
    position: relative;
    height: 100%;
    background: #eee;
    .header-wrapper {
      height: 150px;
      font-size: 16px;
      color: #333;
      background: url('../assets/bg1.png') no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      .one {
        height: 50px;
        line-height: 50px;
        padding: 20px 8px 0;
        margin: 0 8px;
        border-bottom: 1px solid #e2e2e2;
        .user-num {
          display: inline-block;
          float: right;
        }
      }
      .two {
        height: 50px;
        line-height: 50px;
        margin: 0 8px;
        padding: 0 8px;
        .table-name {
          display: inline-block;
          float: right;
        }
      }
    }
    .content-wrapper {
      position: absolute;
      width: 100%;
      top: 150px;
      bottom: 80px;
      background: url('../assets/bg2.png') no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      .title {
        height: 50px;
        line-height: 50px;
        margin: 0 8px;
        padding: 0 8px;
        font-size: 16px;
        color: #333;
        border-bottom: 1px solid #e2e2e2;
        .total-count {
          display: inline-block;
          float: right;
        }
      }
      .content {
        position: absolute;
        top: 51px;
        bottom: 50px;
        font-size: 0;
        color: #666;
        .goods {
          height: 100%;
          margin: 0 8px;
          padding: 0 8px;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          /*overflow: auto;*/
          .food {
            display: flex;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px dashed #dcdcdc;
            .name {
              flex: 1;
              font-size: 14px;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .count {
              flex: 0 0 60px;
              font-size: 14px;
              display: inline-block;
              text-align: center;
            }
            .price {
              flex: 0 0 80px;
              font-size: 14px;
              display: inline-block;
              text-align: right;
            }
          }
        }
      }
      .desc {
        position: absolute;
        width: 100%;
        height: 50px;
        bottom: 0;
        font-size: 13px;
        color: #666;
        div {
          margin: 10px 8px;
          padding: 0 8px;
          .desc-content {
            display: inline-block;
            float: right;
          }
        }
      }
    }
    .tail {
      position: absolute;
      width: 100%;
      height: 20px;
      bottom: 60px;
      background: url('../assets/bg3.png') no-repeat;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
    }
    .foot-wrapper {
      display: flex;
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 48px;
      border-top: 1px solid #efefef;
      font-size: 18px;
      line-height: 48px;
      background: #fff;
      .price-wrapper {
        flex: 1;
        display: inline-block;
        text-align: center;
        .price {
          color: #f76763;
          font-weight: 700;
        }
      }
      .add-order {
        flex: 0 0 105px;
        display: inline-block;
        text-align: center;
        background: #fde6e6;
        color: #f76763;
      }
      .pay-btn {
        flex: 0 0 105px;
        display: inline-block;
        text-align: center;
        background: #f76763;
        color: #fff;
      }
    }
  }
</style>
